<template>
  <!-- <div> -->
    <div id="building" align="center">
      <h1 style="color:pink;">注册</h1>
      <!-- 手机号 -->
      <van-cell-group>
        <van-field  v-model="mobile" label="手机号" placeholder="请输入手机号" />
      </van-cell-group>
      <!-- 验证码 --><br>
      <van-field v-model="newcode" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <template #button>
          <van-button  type="primary" @click="sms" :disabled='status'>{{msg}}</van-button>
        </template>
      </van-field>
      <!-- 注册按钮 --><br>
      <van-button type="primary" @click="register">注册</van-button>
    </div>

  <!-- </div> -->
   
</template>

<script>
export default {

    data() {
        return {
          mobile:"",
          newcode:"",
          status: false,
		      msg: '获取验证码',
		      time: 60

        };
    },

    mounted() {},

    methods: {
        sms(){
          this.axios.post("/user/sendcode",{
              mobile:this.mobile
          }).then((resp) => {
            console.log(resp)
            if (resp.data.code==200){
               var t=setInterval(()=>{
                if(this.time==0){
                  this.msg="发送验证码";
                  this.status=false;
                  this.time=20;
                  clearInterval(t);
              }else{
                  this.msg=this.time + '秒';
                  this.time--;
                  this.status=true;
                }
            },1000)
              console.log("发送验证码成功",resp)
            }
          }).catch((err) => {
            console.log("发送失败",err)
          });
        },
    register(){
      this.axios.post("/user/registers",{
        mobile:this.mobile,
        newcode:this.newcode,
      }).then((resp) => {
        console.log(resp)
        if (resp.data.code==200){
          console.log("注册成功",resp)
          this.$router.push("/zhu")
        }
      })
    }
    },


};
</script>

<style>
#building{
  background:url("../image/rua.jpg");
  width:100%;
  height:100%;
  position: fixed;

}
</style>
